import { observer } from 'mobx-react-lite';

import { useLayoutStore } from '@/store/layout';

import { useNProgress } from '@tanem/react-nprogress';

import styles from './index.module.scss';

const NProgress: React.FC = () => {
  const layoutStore = useLayoutStore();
  const progress = useNProgress({
    isAnimating: layoutStore.loading
  });

  return (
    <div
      className={styles['nprogress']}
      style={{
        opacity: progress.isFinished ? 0 : 1,
        transition: `opacity ${progress.animationDuration}ms linear`
      }}
    >
      <div
        className={styles['bar']}
        style={{
          marginLeft: `${(-1 + progress.progress) * 100}%`,
          transition: `margin-left ${progress.animationDuration}ms linear`
        }}
      />
    </div>
  );
};

export default observer(NProgress);
